<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        .box2{
            width: 150px;
            height: 150px;
            background-color: aquamarine;
        }
        .box3{
            width: 50px;
            height: 50px;
            background-color: bisque;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <script >
        let Page = {
            template:`
            <div >
                111
                <h1>{{ getTime(1620356256698) }}</h1>
                <button @click="click('scd')">按钮1</button>
                <br>
                <button v-on:click="click2">按钮2</button>
                <div class="box1" @click="box1">

                    <div class="box2" @click.stop="box2">
                        <div class="box3" @click.stop="box3">
                            </div>
                        </div>
                    </div>
                    <a href="www.baidu.com" @click.prevent="doL">11111</a>
                    <input v-model="value" @keyup.enter="input()" >
                    <h3 v-for="item in list">{{item.title}}</h3>
            </div>
            `,
            data(){
                return {
                    a:1,
                    value:'',
                    list:[]
                }
            },
            created ()  {
                console.log(this);
                console.log(this.a);
                this.fun();
            },
            methods:{
                doL(){
                    console.log(111)
                },
                fun () {
                    console.log(this.fun2());
                },
                fun2 (){
                    return 'str123';
                },
                getTime(time){
                    let year = new Date(time).getFullYear();
                    let mouth = new Date(time).getMonth()+1;
                    let day = new Date(time).getDate();
                    return year + '-' + mouth + '-' + day;
                },
                click (a) {
                    alert(a);
                },
                click2 () {
                    alert(22);
                },
                box1 () {
                    console.log('box1.click');
                },
                box2 () {
                    console.log('box2.click');
                },
                box3 () {
                    console.log('box3.click');
                },
                input () {
                    console.log('去查询',this.value);
                    this.list.unshift({
                        title:this.value,
                        falg:false
                    })
                    this.value=''
                    return this.value
                },
            }
        }
        let add = {
            template:`
            <a href="#">111</a>
            `
        };
        let app = new Vue({
            render:function(h){
                return h(Page)
            }
        }).$mount('#app');
    </script>
</body>
</html>